<template>
  <div class="distributor-settlement-inquiry-detail">
    <m-header title="结算信息">
      <template #icon>
        <m-iconfont
          classify="m-pc-public"
          icon="m-pc-public_jiesxx"
          color="#4d84ff"
        ></m-iconfont>
      </template>
    </m-header>
    <div class="settlement-info">
      <div class="settlement-info__main">
        <m-info-card :data="settlement_info.data"></m-info-card>
      </div>
      <div v-if="!consume" class="settlement-info__status">
        <div class="settlement-info__status-item">
          <img :src="calcPageStatus" />
        </div>
      </div>
    </div>
    <m-header title="患者信息">
      <template #icon>
        <m-iconfont
          classify="m-pc-public"
          icon="m-pc-public_huanzxx"
          color="#4d84ff"
        ></m-iconfont>
      </template>
    </m-header>
    <div class="patient-info">
      <m-editable
        v-loading="patient_info.table.loading"
        :data="patient_info.table.list"
        :columns="patient_info.table.columns"
      >
        <template #default-options="scope">
          <el-switch
            v-model="scope.row.isMain"
            :disabled="settlement_info.page_status === 4"
            active-color="#52c419"
            inactive-color="#666666"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </m-editable>
    </div>
    <!-- <m-header title="产品信息">
      <template #icon>
        <m-iconfont
          classify="m-pc-public"
          icon="m-pc-public_tishimessage"
        ></m-iconfont>
      </template>
    </m-header> -->
    <div class="product-info__tabs">
      <m-tabs
        :tabs-arr="tabArr"
        :active-index="tabs.status"
        @returnIndex="onHandleTabs"
      />
    </div>
    <div v-show="tabs.status === 0" class="product-info">
      <m-editable
        v-loading="product_info.table.loading"
        :data="product_info.table.list"
        :columns="product_info.table.columns"
        height="400"
      >
        <template #default-barcode="scope">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="checkBarcodeDetail(scope)"
          >
            查看
          </el-button>
        </template>
        <template #default-serial="scope">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="checkSerialDetail(scope)"
          >
            查看
          </el-button>
        </template>
      </m-editable>
      <div class="product-info__pagination">
        <el-pagination
          ref="productInfoPaginationItem"
          align="right"
          :current-page="product_info.page.cur"
          :page-sizes="product_info.page.sizes"
          :page-size="product_info.page.size"
          :layout="product_info.page.layout"
          :total="product_info.page.total"
          :empty-type="product_info.page.empty_type"
          @sizeChange="onProductInfoPageSizeChange"
          @current-change="onProductInfoPageCurrentChange"
        />
      </div>
    </div>
    <!-- 审核信息 -->
    <div v-show="tabs.status === 1" class="valid-info">
      <div v-for="(item, index) in valid_info.data" :key="index">
        <div class="valid-info-information">
          <p>
            <span>当前审核节点{{ consume }}：</span>
            <span>{{ item.orderStatusDesc }}</span>
          </p>
          <p>
            <span>结算单编号：</span>
            <span>{{ item.saleCode }}</span>
          </p>
        </div>
        <m-editable
          v-if="item.logList && item.logList.length"
          :columns="valid_info.columns"
          :data="item.logList"
          :height="400"
          style="margin-top: 20px"
        >
        </m-editable>
      </div>
    </div>
    <m-dialog
      title="条形码"
      width="middle"
      :visible.sync="dialog.add_barcode.visible"
      :footer-visible="false"
      :before-close="handleAddBarcodeDialogClose"
      class="add-barcode-dialog"
      @closeBtn="handleAddBarcodeDialogClose"
    >
      <template #content>
        <div class="add-barcode-dialog__list">
          <m-editable
            :columns="dialog.add_barcode.table.columns"
            :data="dialog.add_barcode.table.data"
            :height="300"
          >
          </m-editable>
        </div>
      </template>
    </m-dialog>
    <m-dialog
      title="序列号"
      width="middle"
      :footer-visible="false"
      :visible.sync="dialog.serial_number.visible"
      :before-close="handleSerialNumberDialogClose"
      :loading="dialog.serial_number.table.loading"
      class="serial-number-dialog"
      @closeBtn="handleSerialNumberDialogClose"
    >
      <template #content>
        <div class="serial-number-dialog__list">
          <m-editable
            :columns="dialog.serial_number.table.columns"
            :data="dialog.serial_number.table.data"
            :height="300"
          >
          </m-editable>
        </div>
      </template>
    </m-dialog>
    <m-dialog
      class="popup__m-dialog"
      title="审核"
      width="1000px"
      :confirm-loading="examine.dialog.loading"
      :visible.sync="examine.dialog.visible"
      :before-close="onExamineDialogClose"
      :footer-visible="false"
      @refuse="onExamineDialogClose"
      @closeBtn="onExamineDialogClose"
    >
      <template #content>
        <m-editable
          v-loading="examine.table.loading"
          class="content__m-editable"
          :empty-type="0"
          :data="examine.table.data"
          :columns="examine.table.columns"
          height="400"
          style="height: 300px"
        >
          <template slot="default-remarks" slot-scope="scope">
            <p v-if="scope.row.status !== 2">{{ scope.row.remarks }}</p>
            <el-input
              v-else
              size="mini"
              v-model="scope.row.remarks"
              placeholder="请输入"
              maxlength="50"
            ></el-input>
          </template>
          <template slot="default-action" slot-scope="scope">
            <el-button
              v-if="scope.row.status === 2"
              type="primary"
              plain
              size="mini"
              @click.stop="onExaminePassReject(scope.row, 4)"
              >通过</el-button
            >
            <el-button
              v-if="scope.row.status === 2"
              type="primary"
              plain
              size="mini"
              @click.stop="onExaminePassReject(scope.row, 3)"
              >驳回</el-button
            >
          </template>
        </m-editable>
      </template>
    </m-dialog>
  </div>
</template>
<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common';
import {
  distributorSettleExtraInfo,
  distributorSettleProductPageList,
  distributorSettleSerialNumberList,
  distributorSettleSettleInfo,
  distributorSettleExamineList,
  distributorSettleExamine,
  hospitalSettleExtraInfoLast,
} from '@api/hossyn-order-center';
import mTabs from '@pc/m-components/m-tabs/index.vue';
import { cloneDeep } from 'lodash';
import * as CONSTS from './const';

const auditPng = require('@assets/img/audit.png');
const passedPng = require('@assets/img/passed.png');
const rejectPng = require('@assets/img/reject.png');
const draftPng = require('@assets/img/draft.png');

export default {
  name: 'DistuributorSettlementInquiryDetail',
  components: {
    mTabs,
  },
  data() {
    return {
      settlement_info: {
        status_img: {
          auditPng,
          passedPng,
          rejectPng,
          draftPng,
        },
        page_status: 0,
        data: {
          labelWidth: '140px',
          valueWidth: '190px',
          content: [
            {
              label: '业务类型',
              value: '',
              key: 'busModel',
            },
            {
              label: '结算类型',
              value: '',
              key: 'typeDesc',
            },
            {
              label: '主结算单号',
              value: '',
              key: 'settleOrderMainCode',
            },
            {
              label: '发起身份',
              value: '',
              key: 'sourceDesc',
            },
            {
              label: '配送商',
              value: '',
              key: 'pCompanyName',
            },
            {
              label: '客户名称',
              value: '',
              key: 'customerName',
            },
            {
              label: '结算日期',
              value: '',
              key: 'settlementDateStr',
            },
            {
              label: '采购含税总金额(元)',
              value: '',
              key: 'totalProdTemplatePriceStr',
            },
            {
              label: '销售含税总金额(元)',
              value: '',
              key: 'totalProdSalePriceStr',
            },
          ],
        },
      },
      tabs: {
        arr: CONSTS.TABS_ARR,
        status: 0,
      },
      patient_info: {
        table: {
          list: [],
          columns: [],
          loading: false,
        },
      },
      product_info: {
        table: {
          list: [],
          columns: CONSTS.PRODUCT_INFO_TABLE_COLUMNS,
          loading: false,
        },
        page: {
          cur: 1,
          size: PAGE_NUMBER[0],
          total: 0,
          sizes: PAGE_NUMBER,
          layout: PAGINATION_LAYOUT,
          empty_type: 0,
        },
      },
      valid_info: {
        columns: CONSTS.EXAMINE_COLUMNS,
        data: [],
      },

      examine: {
        dialog: {
          visible: false,
          loading: false,
        },
        table: {
          columns: CONSTS.EXAMINE_TABLE,
          data: [],
          loading: false,
        },
      },
      dialog: {
        serial_number: {
          visible: false,
          table: {
            loading: false,
            columns: CONSTS.SERIAL_COLUMNS,
            data: [],
          },
        },
        add_barcode: {
          visible: false,
          table: {
            columns: CONSTS.BARCODE_COLUMNS,
            data: [],
          },
        },
      },
    };
  },
  computed: {
    settleOrderId() {
      return this.$route.query.settleOrderId;
    },
    calcPageStatus() {
      const obj = {
        1: this.settlement_info.status_img.draftPng,
        2: this.settlement_info.status_img.auditPng,
        3: this.settlement_info.status_img.rejectPng,
        4: this.settlement_info.status_img.passedPng,
      };
      return obj[this.settlement_info.page_status];
    },
    consume() {
      return this.$route.query.consume;
    },
    tabArr() {
      const arr = cloneDeep(CONSTS.TABS_ARR);
      if (this.consume) {
        arr.splice(1, 1);
      }
      return arr;
    },
  },
  created() {
    this.getProductList();
    this.getBaseSettleInfo();
    this.getPatientInfoList();
  },
  mounted() {},
  methods: {
    initGlobalBtn() {
      if (this.settlement_info.page_status === 2) {
        const obj = {
          type: 'btn',
          arr: [
            {
              val: '审核',
              type: 'primary',
              icon: ' ',
              handle: this.onVerify,
            },
          ],
        };
        this.$store.commit('changeLayoutHandle', obj);
      }
    },
    onExamineDialogClose() {
      this.examine.dialog.visible = false;
      this.getProductList();
      this.getBaseSettleInfo();
      this.getPatientInfoList();
    },
    onVerify() {
      this.examine.dialog.visible = true;
      this.getDistributorSettleExamineList();
    },
    // 获取审核的子单
    getDistributorSettleExamineList() {
      this.examine.loading = true;
      this.$axios({
        url: distributorSettleExamineList,
        method: 'post',
        data: {
          settleOrderMainId: this.settleOrderId,
        },
      })
        .then((res) => {
          this.examine.table.data = res.data.payload || [];
        })
        .catch(() => {
          this.examine.table.data = [];
        })
        .finally(() => {
          this.examine.loading = false;
        });
    },
    calcDefaultItem(row) {
      const defaultPatientItem = this.patient_info.table.list.find(
        (item) => item.isMain
      );
      if (row.salseCode === defaultPatientItem.saleCode) {
        return !!defaultPatientItem.isMain;
      }
      return false;
    },
    // 审核通过or拒绝
    onExaminePassReject(row, status) {
      const dataObj = {
        remarks: row.remarks,
        salseCode: row.salseCode,
        salseId: row.salseId,
        settleMainOrderId: row.settleMainOrderId,
        offOn: this.calcDefaultItem(row),
        status,
      };
      this.$axios({
        url: distributorSettleExamine,
        method: 'post',
        data: [dataObj],
      })
        .then((res) => {
          if (res.data.code === '0' && status === 3) {
            this.$message({
              type: 'success',
              message: '审核已拒绝!',
            });
          } else {
            this.$message({
              type: 'success',
              message: '审核已通过!',
            });
          }
          this.getDistributorSettleExamineList();
        })
        .finally(() => {
          this.examine.loading = false;
        });
    },
    checkSerialDetail(scope) {
      this.dialog.serial_number.visible = true;
      this.getSerialNumberList(scope);
    },
    checkBarcodeDetail(scope) {
      this.dialog.add_barcode.visible = true;
      this.dialog.add_barcode.table.data = [
        {
          mainBarCode: scope.row.mainBarCode,
          subBarCode: scope.row.subBarCode,
        },
      ];
    },
    getSerialNumberList(scope) {
      this.dialog.serial_number.table.loading = true;
      this.$axios({
        method: 'post',
        url: distributorSettleSerialNumberList,
        data: {
          itemDetailId: scope.row.itemDetailId,
        },
      })
        .then((res) => {
          this.dialog.serial_number.table.data = res.data.payload || [];
        })
        .catch(() => {})
        .finally(() => {
          this.dialog.serial_number.table.loading = false;
        });
    },
    handleSerialNumberDialogClose() {
      this.dialog.serial_number.visible = false;
    },
    handleAddBarcodeDialogClose() {
      this.dialog.add_barcode.visible = false;
    },
    onHandleTabs(val) {
      this.tabs.status = val;
    },
    getPatientInfoList() {
      this.patient_info.table.loading = true;
      let urlInfo = '';
      if (this.consume) {
        urlInfo = hospitalSettleExtraInfoLast;
      } else {
        urlInfo = distributorSettleExtraInfo;
      }
      this.$axios({
        method: 'post',
        url: urlInfo,
        data: {
          settleOrderMainId: this.settleOrderId,
        },
      })
        .then((res) => {
          this.patient_info.table.columns = res.data.payload.headers.map(
            (item) => ({
              ...item,
              prop: item.key,
            })
          );
          // 增加一行options
          this.patient_info.table.columns.push({
            prop: 'options',
            label: '操作',
            width: 100,
            fixed: 'right',
          });
          this.patient_info.table.list = res.data.payload.tableItems;
        })
        .catch(() => {})
        .finally(() => {
          this.patient_info.table.loading = false;
        });
    },
    getProductList() {
      this.product_info.table.loading = true;
      this.$axios({
        method: 'post',
        url: distributorSettleProductPageList,
        data: {
          page: this.product_info.page.cur,
          pageSize: this.product_info.page.size,
          settleOrderMainId: this.settleOrderId,
        },
      })
        .then((res) => {
          this.product_info.table.list = res.data.payload.content || [];
          this.product_info.page.total = res.data.payload.totalElements;
        })
        .catch(() => {})
        .finally(() => {
          this.product_info.table.loading = false;
        });
    },
    getBaseSettleInfo() {
      this.$axios({
        method: 'post',
        url: distributorSettleSettleInfo,
        data: {
          settleOrderMainId: this.settleOrderId,
        },
      }).then((res) => {
        this.settlement_info.data.content = this.rematchBaseInfoData(
          res.data.payload || {}
        );
        this.settlement_info.page_status = res.data.payload.mainStatus;
        this.valid_info.data = res.data.payload.subOrderList || [];
        this.initGlobalBtn();
      });
    },
    rematchBaseInfoData(result) {
      return this.settlement_info.data.content.map((item) => ({
        ...item,
        value: item.trans ? item.trans[result[item.key]] : result[item.key],
      }));
    },
    onProductInfoPageSizeChange(sizeNum) {
      this.product_info.page.size = sizeNum;
      this.getProductList();
    },
    onProductInfoPageCurrentChange(curNum) {
      this.product_info.page.cur = curNum;
      this.getProductList();
    },
  },
};
</script>
<style lang="less">
.distributor-settlement-inquiry-detail {
  overflow: auto;
  .settlement-info {
    display: flex;
    .settlement-info__main {
      margin-right: 20px;
    }
    .settlement-info__status {
      width: 140px;
      float: right;
      padding-top: 20px;
      padding-right: 20px;
      .settlement-info__status-item {
        width: 140px;
        height: 84px;
        img {
          width: 140px;
          height: auto;
        }
      }
    }
  }
  .product-info__tabs {
    margin-bottom: 20px;
  }
  .patient-info {
    margin-top: 20px;
  }
  .product-info {
    display: flex;
    flex-direction: column;
    height: 500px;
    .product-info__pagination {
      padding: 10px 20px;
      border: 1px solid @cutOffRuleColor;
      border-top: none;
      border-radius: 0 0 3px 3px;
    }
  }

  .valid-info {
    margin: 20px 0;
    padding: 0 10px;
    background: @backdropColor;
    padding-bottom: 20px;
    .valid-info-information {
      padding-top: 20px;
      display: flex;
      p {
        display: flex;
        span {
          display: block;
          font-size: 14px;
        }
        span:first-child {
          width: 100px;
          text-align: right;
          color: @subheadingButtonColor;
        }
        span:last-child {
          width: 240px;
          text-align: left;
          color: @titleTextColor;
        }
      }
    }
  }
  .serial-number-dialog__list,
  .add-barcode-dialog__list {
    height: 300px;
    display: flex;
    flex-direction: column;
  }
}
</style>
